<template>
    <view class="maincontent">
        <view class="search-row">
            <view class="search-fixed">
                <view class="search-view">
                    <view class="search-input" @click="search">
                        <view class="input-text">
                            <view class="text-wenzi">神雀618 好券抢先拿</view>
                            <view class="text-image">
                                <image :src="searchImg" mode="aspectFit"></image>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="top-tow">
            <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper-row">
                <swiper-item v-for="(item, index) in bannerList" :key="index" @click="toYr(item)">
                    <view class="swiper-item">
                        <lazy-image class="lazy-image" :realSrc="item.image" mode="widthFix"></lazy-image>
                    </view>
                </swiper-item>
            </swiper>
        </view>
        <view style="height: 30px;"></view>

        <view class="enterman-row">
            <view class="box">
                <swiper class="swiper" duration="300" @change="categoryChange">
                    <swiper-item v-for="(page, pageindex) in categoryList" :key="pageindex">
                        <view class="category-list">
                            <view class="icon" v-for="category in page" :key="category.cat_id"
                                  @click="toCategory(category)">
                                <image :src="category.img" mode="widthFix"></image>
                                <view class="cate-list-icon-title">{{ category.title }}</view>
                            </view>
                        </view>
                    </swiper-item>
                </swiper>
                <view class="dots">
                    <view v-for="(page, pageindex) in categoryList" :key="pageindex"
                          :class="{ active: pageindex == currentPageindex }"></view>
                </view>
            </view>
        </view>

        <view style="height: 50px;"></view>
        <!-- 新品区 -->
        <view class="newgoods-row" @click="goBrandGoods()">
            <lazy-image class="lazy-image" :realSrc="ads2"></lazy-image>
        </view>
        <!-- 占位 -->
        <view class="place"></view>
        <!-- 特价和包邮区 -->
        <view class="specialoffer-row">
            <view class="specialoffer-free" @click="goNine()">
                <lazy-image class="lazy-image" :realSrc="ads3"></lazy-image>
            </view>
            <view class="img-place"></view>
            <view class="specialoffer-brand" @click="goNewGoods()">
                <lazy-image class="lazy-image" :realSrc="ads4"></lazy-image>
            </view>
        </view>
        <view style="height: 40px;"></view>
        <view class="pre-select">
            <view class="pre-select-left">
                <image src="../../static/img/sy/zuo.png" mode="aspectFit"></image>
            </view>
            <view class="pre-select-cente">
                <text>特惠优选</text>
            </view>
            <view class="pre-select-right">
                <image src="../../static/img/sy/you.png" mode="aspectFit"></image>
            </view>
        </view>
        <!-- 占位 -->
        <view style="height: 30px;"></view>
        <!-- 商品列表 -->
        <tb-goods-list :goodsList="hosList" :loadingText="loadingText" @eventClick="toDetail"
                       :tm="true"></tb-goods-list>
        <active-money-rain/>
        <view class="mask update-view" v-if="updateOrNot">
            <view class="update-tip-view">
                <view class="update-tip">
                    <image src="../../static/img/sy/update.png" mode="scaleToFill"></image>
                </view>
                <view class="update-btn">
                    <view class="btn-to-update" @click="toUpdateApp">
                        <text class="btn-txt">立即升级</text>
                    </view>
                </view>
                <view class="close-update" @click="closeUpdate">
                    <image src="../../static/img/sy/close.png" mode="widthFix"></image>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import TbGoodsList from '../../components/tb-goods-list.vue';
    import ActiveMoneyRain from '../../components/active-money-rain';

    import searchImg from '../../static/img/main-search.png'
    import aiqiyi from '../../static/img/sy/aiqiyi.png'

    let page = 1,
        pageSize = 20;
    export default {
        components: {
            TbGoodsList,
            ActiveMoneyRain,
        },
        onReady() {
            this.genHotList();
        },
        onShow() {
			genCommonData();
            let locatgionUrl = window.location.href;			
        },
        onLoad(event) {
            this.showUpdateOrNot();
            var that = this;
            page = 1;
            that.hosList = [];
            let ua = navigator.userAgent.toLowerCase();
            if (event.token != '' && event.token != 'null' && event.token != null && event.token != undefined && event.token !=
                'undefined') {
                uni.setStorageSync('token', decodeURI(event.token));
                uni.setStorageSync('bump', event.bump);
                uni.setStorageSync('relationId', event.relationId);
                uni.setStorageSync('mobile', event.customerId);
            }
            that.genBanner();
            that.genadsList();
        },
        data() {
            return {
                searchImg,
                loadingText: '正在加载...',
                ads1: '',
                ads2: '',
                ads3: '',
                ads4: '',
                ads5: '',
                categoryList: [
                    [
                        //第一页
                        {
                            cat_id: 0,
                            img: '../../static/img/sy/ZY1.png',
                            title: '好品购',
                            url: 'pages/selfsupport/selfsupport'
                        },
                        {
                            cat_id: 1,
                            img: '../../static/img/sy/JD1.png',
                            title: '京东',
                            url: 'pages/goodslist/goodslist'
                        },
                        {
                            cat_id: 11,
                            img: '../../static/img/sy/PDD.png',
                            title: '拼多多',
                            url: 'pages/goodslist/goodslist'
                        },
                        {
                            cat_id: 3,
                            img: '../../static/img/sy/TB1.png',
                            title: '淘宝',
                            url: 'pages/tblist/tblist'
                        },
                        {
                            cat_id: 4,
                            img: '../../static/img/sy/TM1.png',
                            title: '天猫',
                            url: 'pages/tblist/tblist'
                        },
                        {
                            cat_id: 105,
                            img: aiqiyi,
                            title: '爱奇艺',
                            url: 'pages/selfdetail/selfdetail?skuId=2474&cid=531&title=爱奇艺VIP会员卡月卡 季卡 半年卡 年卡（直充）&seller=好品购'
                        },
                        {
                            cat_id: 106,
                            img: '../../static/img/sy/tengxun.png',
                            title: '腾讯',
                            url: 'pages/selfdetail/selfdetail?skuId=2529&cid=531&title=腾讯视频VIP会员卡月卡季卡年卡（直充）&seller=好品购'
                        },
                        {
                            cat_id: 107,
                            img: '../../static/img/sy/mangguo.png',
                            title: '芒果TV',
                            url: 'pages/selfdetail/selfdetail?skuId=2518&cid=531&title=芒果TV移动PC端会员月卡季卡半年卡年卡直充&seller=好品购'
                        },
                        {
                            cat_id: 108,
                            img: '../../static/img/sy/youku.png',
                            title: '优酷',
                            url: 'pages/selfdetail/selfdetail?skuId=2523&cid=531&title=优酷土豆黄金会员直充周卡月卡季卡年卡直充&seller=好品购'
                        },
                        {
                            cat_id: 109,
                            img: '../../static/img/sy/souhu.png',
                            title: '搜狐',
                            url: 'pages/selfdetail/selfdetail?skuId=2516&cid=531&title=搜狐黄金会员直充月卡季卡年卡直充&seller=好品购'
                        }
                    ],
                    [{
                        cat_id: 100,
                        img: '../../static/img/sy/suningyigou.png',
                        title: '苏宁易购',
                        url: 'https://m.suning.com/index.html'
                    },
                        {
                            cat_id: 101,
                            img: '../../static/img/sy/wangyikaola.png',
                            title: '网易考拉',
                            url: 'https://weex.kaola.com/activity/pages/kaola123.html'
                        },
                        {
                            cat_id: 102,
                            img: '../../static/img/sy/weipinhui.png',
                            title: '唯品会',
                            url: 'https://m.vip.com/'
                        },
                        {
                            cat_id: 103,
                            img: '../../static/img/sy/wangyiyanxuan.png',
                            title: '网易严选',
                            url: 'https://m.you.163.com'
                        },
                        {
                            cat_id: 104,
                            img: '../../static/img/sy/dazong.png',
                            title: '大众点评',
                            url: 'https://m.dianping.com/'
                        }
                    ]
                ],
                currentPageindex: 0,
                hosList: [],
                updateOrNot: false,
                bannerList: []
            };
        },
        onReachBottom: function () {
            this.genHotList();
        },
        onPullDownRefresh: function () {
            uni.stopPullDownRefresh(); //停止下拉刷新动画
            var that = this;
            that.hosList = [];
            page = 1;
            that.genadsList();
            that.genHotList();
        },
        methods: {
            async genBanner() {
                let res = await this.$request.get('/coupon-admin/advertisementmar/bannerList');
                let datas = res.data;
                if (datas.code == '20127') {
                    onStartLogin()
                }
                this.bannerList = datas.data;
                console.log("res.data.data===" + this.bannerList)
            },
            showUpdateOrNot() {
                let url = window.location.href;
                let reg_url = /^[^\?]+\?([\w\W]+)$/,
                    reg_para = /([^&=]+)=([\w\W]*?)(&|$|#)/g,
                    arr_url = reg_url.exec(url),
                    ret = {};
                if (arr_url && arr_url[1]) {
                    let str_para = arr_url[1],
                        result;
                    while ((result = reg_para.exec(str_para)) != null) {
                        ret[result[1]] = result[2];
                    }
                }

                switch (uni.getSystemInfoSync().platform) {
                    case 'android':
                        let upOrNot = ret.appUpdate;
                        console.log('upOrNot===' + upOrNot)
                        if (upOrNot != null && upOrNot != undefined && upOrNot != "undefined") {
                            this.updateOrNot = false;
                        } else {
                            this.updateOrNot = false;
                        }
                        break;
                    case 'ios':
                        let appVersion = ret.appVersion;
                        console.log('appVersion===' + appVersion)
                        if (appVersion != null && appVersion != undefined && appVersion != "undefined") {
                            this.updateOrNot = false;
                        } else {
                            this.updateOrNot = false;
                        }
                        break;
                    default:
                        break;
                }

            },
            toUpdateApp() {
                switch (uni.getSystemInfoSync().platform) {
                    case 'android':
                        appNavigateTo( "intent://down.sqqmall.com?a#Intent;scheme=http;end");
                        // appNavigateTo( "intent://down.sqqmall.com?a#Intent;scheme=http;package=com.android.browser;end");
                        // appNavigateTo( "http://down.sqqmall.com/");
                        break;
                    // case 'ios':
                    //     let url = "http://down.sqqmall.com/";
                    //     h5NavigateTo(url, url);
                    //     break;
                    default:
                        appNavigateTo( "http://down.sqqmall.com/");
                        break;
                }
            },
            closeUpdate() {
                this.updateOrNot = false;
            },
            toYr(e) {
                let url = e.linkaddress;
				console.log('linkaddress=='+url)
                if (url != null && url != "") {
                    /* let aUrl = this.$httpUrl + 'pages/kongbai/kongbai';
                    let hUrl = '../kongbai/kongbai'; */
					let hurl = url.substr(url.indexOf('#') + 1);
                    h5NavigateTo(hurl, hurl);
                }
            },
            startWebview(url) {
                h5NavigateTo(url, url);
            },
            goNewGoods() {
                let aUrl = this.$httpUrl + 'pages/couponList/couponList';
                let hUrl = '../couponList/couponList';
                h5NavigateTo(aUrl, hUrl);
            },
            goBrandGoods() {
                let aUrl = this.$httpUrl + 'pages/yunying/money/index';
                let hUrl = '../yunying/money/index';
                h5NavigateTo(aUrl, hUrl);
            },
            toDetail(e) {
                let hUrl =
                    '../tbdetail/tbdetail?skuId=' +
                    e.num_iid +
                    '&cid=1' +
                    '&title=' +
                    e.title +
                    '&seller=淘宝' +
                    '&coupon_amount=' +
                    e.coupon_amount +
                    '&startTime=' +
                    e.coupon_start_time +
                    '&endTime=' +
                    e.coupon_end_time +
                    '&tm=false';
                let aUrl =
                    this.$httpUrl +
                    'pages/tbdetail/tbdetail?skuId=' +
                    e.num_iid +
                    '&cid=1' +
                    '&title=' +
                    e.title +
                    '&seller=淘宝' +
                    '&coupon_amount=' +
                    e.coupon_amount +
                    '&startTime=' +
                    e.coupon_start_time +
                    '&endTime=' +
                    e.coupon_end_time +
                    '&tm=false';
                h5NavigateTo(aUrl, hUrl);
            },
            search() {
                let aUrl = this.$httpUrl + 'pages/search/search';
                let hUrl = '../search/search';
                h5NavigateTo(aUrl, hUrl);
            },
            categoryChange(event) {
                this.currentPageindex = event.detail.current;
            },
            toCategory(e) {
                if (e.url.indexOf('http') == -1) {
                    let title = e.title;
                    let aUrl = this.$httpUrl + e.url + '?title=' + title + '&cat_id=' + e.cat_id;
                    let hUrl = e.url.replace('pages', '..') + '?title=' + title + '&cat_id=' + e.cat_id;
                    h5NavigateTo(aUrl, hUrl);
                } else {
                    appNavigateTo(e.url);
                }
            },
            getCode: function () {
                const code = this.getUrlParam('code');
                const local = window.location.href;
                var appid = 'wxa101c6326d74392e';
                var redirect_uri = this.$redirect_uri;
                if (code == null || code === '') {
                    var url =
                        'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
                        appid +
                        '&redirect_uri=' +
                        redirect_uri +
                        '&response_type=code' +
                        '&scope=snsapi_base' +
                        '&state=STATE#wechat_redirect';
                    appNavigateTo( url);
                } else {
                    this.getOpenId(code);
                }
            },
            getOpenId: function (code) {
                console.log('start gen openid');
                uni.request({
                    url: this.$serverUrl + '/wechat/getOpenid',
                    method: 'GET',
                    dataType: 'json',
                    contentType: 'application/json',
                    data: {
                        code: code
                    },
                    success: res => {
                        console.log('res====' + res);
                        let datas = res.data;
                        console.log('openid===' + datas.openid);
                        uni.setStorage({
                            key: 'openId',
                            data: datas.openid,
                            success: function () {
                                console.log('set openid success');
                            }
                        });
                    }
                });
            },
            getUrlParam: function (name) {
                let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
                let r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            },
            goNine() {
                let aUrl = this.$httpUrl + 'pages/niennie/niennie';
                let hUrl = '../niennie/niennie';
                if (process.env.VUE_APP_API === "development") {
                    const testUrls = ['../secKill/secKill', '../recommendGoods/recommendGoods', '../goodCoupon/goodCoupon'];
                    hUrl = testUrls[Math.floor(Math.random() * 3)];
                }

                h5NavigateTo(aUrl, hUrl);
            },
            async genHotList() {
                try {
                    let data = {
                        pageno: page,
                        pagesize: pageSize,
                        cat: '7',
                        istmall: true,
                        sort: 'total_sales_desc',
                        hascoupon: 'true'
                    };
                    let res = await this.$request.post('/coupon-product/myq/tbGoods/goodsList', {
                        data: data
                    });
                    let datas = res.data.data;
                    if (datas.length > 0) {
                        this.hosList = this.hosList.concat(datas);
                        page++;
                        if (datas.length < 20) {
                            this.loadingText = '没有更多了';
                        }
                    } else {
                        this.loadingText = '没有更多了';
                    }
                    uni.stopPullDownRefresh();
                } catch (e) {
                    console.log('loading hot goods list fail' + e);
                    this.loadingText = '没有更多了';
                }
            },
            genCatList() {
                try {
                    let res = this.$request.get('/coupon-product/common/dict/' + 'CAT_LIST', {});
                    let datas = res.data;
                    this.categoryList = datas.datas;
                    uni.stopPullDownRefresh();
                } catch (e) {
                    console.log(e);
                }
            },
            genadsList() {
                try {
                    uni.request({
                        url: this.$usereq + '/coupon-admin/outside/advertisementmar/list',
                        method: 'GET',
                        data: {
                            type: 1
                        },
                        success: res => {
                            let list = res.data.data;
                            for (var item in list) {
                                if (list[item].advertising == 'A1') {
                                    this.ads1 = list[item].image;
                                } else if (list[item].advertising == 'A2') {
                                    this.ads2 = list[item].image;
                                } else if (list[item].advertising == 'A3') {
                                    this.ads3 = list[item].image;
                                } else if (list[item].advertising == 'A4') {
                                    this.ads4 = list[item].image;
                                } else if (list[item].advertising == 'A5') {
                                    this.ads5 = list[item].image;
                                }
                            }
                        }
                    });
                } catch (e) {
                    console.log(e);
                }
            }
        }
    };


</script>

<style lang="scss">
    .search-row {
        position: fixed;
        top: 0;
        width: 100%;
        height: 150px;
        line-height: 150px;
        background-color: white;
        z-index: 1001;
        box-shadow: 0px 15px 10px -15px #f2f2f2;

        .search-fixed {
            width: 100%;
            height: 100%;
            /* margin-bottom: 10px; */
            display: flex;
            flex-direction: column;

            .main-title {
                width: 100%;
                height: 0px;
                color: #ff4964;
                display: flex;
                justify-content: center;
                position: absolute;
                top: -20px;
            }

            .search-view {
                width: 100%;
                height: 0px;
                padding-left: 5%;
                margin-top: 10%;

                .search-input {
                    width: 90%;
                    height: 70px;
                    line-height: 70px;
                    border: 1Px #ff4964 #f2f2f2;
                    background-color: #f2f2f2;
                    border-radius: 40px;
                    font-size: 28px;

                    .input-text {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .text-wenzi {
                            padding-left: 20px;
                        }

                        .text-image {
                            height: 100%;
                            display: flex;
                            align-items: center;
                            padding-right: 20px;

                            image {
                                width: 40px;
                                height: 40px;
                            }
                        }

                        color: #cdcdcd;
                    }
                }
            }
        }
    }

    .place {
        height: 10px;
    }

    .maincontent {
        display: flex;
        display: -webkit-flex;
    }

    .top-tow {
        width: 100%;
        height: 300px;
        margin-top: 150px;

        .search-head {
            height: 60px;
            letter-spacing: 2px;
            margin-top: 70px;
            width: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-left: 25%;

            image {
                width: 100%;
                height: 60px;
            }
        }

        .swiper-row {
            width: 94%;
            height: 300px;
            margin: 0 auto;
            margin-top: 20px;
            border-radius: 10px;

            image {
                height: 300px;
                width: 100%;
                border-radius: 10px;
            }
        }
    }

    .enterman-row {
        width: 94%;
        height: 240px;

        .box {
            width: 100%;
            border-radius: 20px;
            background-color: #ffffff;

            .dots {
                display: flex;
                justify-content: center;
                width: 100%;
                margin-top: -8%;
                margin-left: 4%;

                view {
                    width: 30px;
                    height: 5px;
                    background-color: rgba(0, 0, 0, 0.2);
                    border-radius: 2px;

                    &.active {
                        background-color: #FF7665;
                    }
                }
            }

            .swiper {
                padding-left: 4%;
                width: 100%;
                height: 320px;
                min-height: 320px;

                .uni-swiper-dot {
                    width: 20px;
                }

                .category-list {
                    width: 100%;
                    height: auto;
                    display: flex;
                    justify-content: space-between;
                    flex-flow: wrap;

                    .icon {
                        width: 20%;
                        display: flex;
                        flex-flow: wrap;
                        justify-content: center;
                        font-size: 22px;
                        color: black;
                        padding-top: 20px;

                        image {
                            width: 60px;
                            height: 60px !important;
                        }

                        view {
                            width: 100%;
                            display: flex;
                            justify-content: center;
                        }

                        .cate-list-icon-title {
                            padding-top: 10px;
                            font-size: 24px;
                            font-color: #181818;
                        }
                    }
                }
            }
        }
    }

    .newgoods-row {
        width: 90%;
        height: 200px;
        display: flex;
        justify-content: center;
        padding-left: 5%;

        image {
            width: 100%;
            height: 200px;
        }
    }

    .specialoffer-row {
        width: 100%;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;

        .img-place {
            width: 2%;
        }

        .specialoffer-brand {
            width: 46.5%;
            height: 200px;

            image {
                width: 100%;
                height: 200px;
                /* border: 1Px solid #f2f2f2; */
            }
        }

        .specialoffer-free {
            width: 46.5%;
            height: 200px;

            image {
                width: 100%;
                height: 200px;
            }
        }
    }

    .pre-select {
        width: 100%;
        height: 50px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        image {
            width: 60px;
            height: 50px;
        }

        .pre-select-cente {
            height: 50px;
            margin-bottom: 15px;

            text {
                font-weight: 800;
                color: #ff4964;
                font-size: 46px;
            }
        }
    }

    .use-step {
        width: 100%;
        height: 56px;
        line-height: 56px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .update-view {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.4);
        z-index: 6000;

        .update-tip-view {
            width: 78%;
            height: 700px;
            z-index: 6666;
            position: fixed;
            left: 10%;
            right: 0;
            top: 30%;
            bottom: 0;
            background-color: white;
            border-radius: 20px;

            .update-tip {
                width: 100%;
                height: 500px;

                image {
                    width: 100%;
                    height: 100%;
                }
            }

            .update-btn {
                width: 100%;
                height: 120px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 12%;

                .btn-to-update {
                    width: 45%;
                    height: 70px;
                    line-height: 60px;
                    color: white;
                    background: -webkit-linear-gradient(left, #FF7665, #FF4964);
                    background: -o-linear-gradient(right, #FF7665, #FF4964);
                    background: -moz-linear-gradient(right, #FF7665, #FF4964);
                    background: linear-gradient(to right, #FF7665, #FF4964);

                    .btn-txt {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        padding-top: 3%;
                    }
                }
            }
        }

        .close-update {
            width: 60px;
            height: 60px;
            margin: auto;
            margin-top: 10%;

            image {
                width: 100%;
                height: 100%;
            }
        }

    }
</style>


